<template>
	<div class="app_safe_container">
		<sw-setting-frame title="账号自动冻结设置" tips="开启之后，输入几次错误后会进行登录锁定">
			<template slot="form">
				<h4>是否冻结账号</h4>
				<el-switch v-model="formData.valiRule" active-value="1" inactive-value="2" :disabled="!isHasSetAuth" @change="updateFrozenConfig" />
			</template>
			<template slot="body" v-if="formData.valiRule === '1'">
				<sw-custom-input size="mini" input-type="number" v-model="formData.errorTimeLen" :disabled="!isHasSetAuth" />
				<font>秒钟内，</font>
				<span>账号密码连续输错超过</span>
				<sw-custom-input size="mini" input-type="number" v-model="formData.errorCount1" :disabled="!isHasSetAuth" />
				<font>次，</font>
				<span>出现验证码，</span>
				<span>账号密码连续输错超过</span>
				<sw-custom-input size="mini" input-type="number" v-model="formData.errorCount" :disabled="!isHasSetAuth" />
				<font>次，</font>
				<span>锁定账号</span>
				<sw-custom-input size="mini" input-type="number" v-model="formData.frozenLen" :disabled="!isHasSetAuth" />
				<font>秒钟</font>
				<el-button size="mini" type="primary" v-hasPermi="settingButton" @click="updateFrozenConfig">保存</el-button>
			</template>
		</sw-setting-frame>
		<div class="account_freeze_log">
			<h2>账号冻结记录</h2>
			<sw-common-frame :count="dataCount" :loading="loading">
				<el-form slot="query" size="small" inline v-if="isExistQuery">
					<el-form-item><el-input placeholder="请输入用户账号" v-model="queryData.account" clearable /></el-form-item>
					<el-form-item><el-input placeholder="请输入用户姓名" v-model="queryData.userName" clearable /></el-form-item>
					<el-form-item><el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button></el-form-item>
				</el-form>
				<el-table slot="table" v-bind="tableConfig" :data="tableData">
					<el-table-column label="序号" type="index" align="center" width="50" />
					<el-table-column label="用户账号" prop="account" min-width="176" show-overflow-tooltip />
					<el-table-column label="用户姓名" prop="userName" min-width="128" show-overflow-tooltip />
					<el-table-column label="错误次数" prop="errorCount" min-width="80"></el-table-column>
					<el-table-column label="冻结开始时间" prop="frozenTime" min-width="170"></el-table-column>
					<el-table-column label="冻结时长" :formatter="returnFrozenLen" min-width="100"></el-table-column>
					<el-table-column label="当前状态" :formatter="returnAccountName" min-width="80" align="center" />
					<el-table-column label="操作" fixed="right" :width="handleWidth" v-if="isHasAuthButton">
						<template slot-scope="{ row }">
							<el-button type="text" v-hasPermi="handleButtons.update" @click="handleRemoveFrozen(row)">{{ updateButtonName(row.isFrozen) }}</el-button>
						</template>
					</el-table-column>
				</el-table>
				<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
			</sw-common-frame>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import listMixins from '@/mixins/listMixins';
import { updateFrozenSetting } from '@/api/system/tbSysSite';
import { getFrozenRecordList, updateFrozenRecord } from '@/api/system/tbFrozenRecord';
export default {
	name: 'appsafePage',
	mixins: [listMixins],
	data() {
		return {
			pageName: '冻结记录',
			formData: {},
			inputConfig: {
				size: 'mini',
				inputType: 'number'
			}
		};
	},
	computed: {
		listFunction() {
			return eval(getFrozenRecordList);
		},
		settingButton() {
			let setting = lodash.find(this.buttons, { field: 'setting' });
			return setting?.id || '';
		},
		isHasSetAuth() {
			return lodash.some(this.authButton, { id: this.settingButton });
		}
	},
	mounted() {
		let siteInfo = this.$store.getters.siteInfo;
		let fields = ['errorTimeLen', 'errorCount1', 'errorCount', 'frozenLen'];
		this.formData = lodash.cloneDeep(lodash.pick(siteInfo, [...fields, 'id', 'valiRule']));
	},
	methods: {
		updateButtonName(isFrozen) {
			return isFrozen === '1' ? '解除冻结' : '冻结账号';
		},
		//返回冻结时长
		returnFrozenLen(row) {
			return `${row.frozenLen} 秒钟`;
		},
		//返回账号状态
		returnAccountName(row) {
			let attrs = { size: 'small' };
			if (row.isFrozen === '1') {
				attrs['text'] = '锁定';
				attrs['type'] = 'danger';
			} else if (row.isFrozen === '2') {
				attrs['text'] = '正常';
				attrs['type'] = 'success';
			}
			return this.$createElement('elTag', { attrs }, attrs.text);
		},
		//更新自动冻结设置
		async updateFrozenConfig() {
			let result = await updateFrozenSetting(this.formData).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('更新自动冻结设置成功');
				this.$store.dispatch('getSiteBaseInfo');
			}
		},
		//解除或冻结账号
		async handleRemoveFrozen(row) {
			let isFrozen = row.isFrozen === '1' ? '2' : '1';
			let params = { id: row.id, isFrozen: isFrozen };
			let result = await updateFrozenRecord(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${this.updateButtonName(isFrozen)}成功`);
				this.queryTableData();
			} else {
				this.$message.error(`${this.updateButtonName(isFrozen)}失败`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.app_safe_container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	h2 {
		flex-shrink: 0;
		line-height: 1;
		font-size: 18px;
	}
}
.account_freeze_set {
	padding: 16px;
	.form {
		display: flex;
		align-items: center;
		margin-top: 16px;
		line-height: 1;
	}
	.el-switch {
		margin-left: 10px;
	}
	.tips {
		color: #909399;
		margin-top: 10px;
	}
	.body {
		display: flex;
		flex-wrap: wrap;
		margin-top: 16px;
		span,
		font {
			line-height: 28px;
			margin-bottom: 10px;
		}
		font {
			margin-left: 8px;
		}
		span {
			margin-right: 8px;
		}
	}
	.el-button {
		margin: 0 0 10px 10px;
	}
	.el-input {
		width: 48px;
		margin-bottom: 10px;
	}
	&:deep(.el-input__inner) {
		padding: 0;
		font-size: 14px;
		text-align: center;
	}
}
.account_freeze_log {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	border-top: solid 1px #e4e7ed;
	h2 {
		margin: 16px 16px 0;
	}
}
</style>
